<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>会员任务 - 社交圈</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #5B6EF7;
      --primary-light: #E8EBFA;
      --success: #4CD964;
      --success-light: #E6F7EA;
      --warning: #FFCC00;
      --warning-light: #FFF8E6;
      --text-primary: #1D2129;
      --text-secondary: #86909C;
      --border-light: #E5E6EB;
      --bg-white: #FFFFFF;
      --bg-light: #F2F3F5;
      --premium: #FFB800;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-primary);
      font-size: 15px;
      line-height: 1.6;
    }
    
    /* 顶部导航 */
    .page-header {
      background-color: var(--primary);
      color: white;
      padding: 15px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    .header-btn {
      color: white;
      font-size: 16px;
      background: none;
      border: none;
      padding: 5px 10px;
    }
    
    .back-btn {
      color: white;
      font-size: 20px;
    }
    
    /* 任务进度概览 */
    .task-overview {
      background-color: var(--bg-white);
      margin: 15px;
      border-radius: 12px;
      padding: 18px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .overview-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
    }
    
    .progress-stats {
      display: flex;
      justify-content: space-around;
      text-align: center;
      margin-bottom: 15px;
    }
    
    .stat-item {
      flex: 1;
    }
    
    .stat-value {
      font-size: 18px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 3px;
    }
    
    .stat-label {
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .progress-container {
      margin-top: 10px;
    }
    
    .progress-bar-container {
      height: 8px;
      background-color: var(--bg-light);
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 8px;
    }
    
    .progress-bar {
      height: 100%;
      background-color: var(--primary);
      border-radius: 4px;
    }
    
    .progress-text {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    /* 任务分类导航 */
    .task-tabs {
      display: flex;
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
      overflow-x: auto;
      white-space: nowrap;
    }
    
    .task-tab {
      padding: 14px 20px;
      font-size: 16px;
      font-weight: 500;
      color: var(--text-secondary);
      border-bottom: 2px solid transparent;
      flex-shrink: 0;
      cursor: pointer;
    }
    
    .task-tab.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }
    
    /* 任务列表容器 */
    .task-list-container {
      padding-bottom: 20px;
    }
    
    /* 任务卡片样式 */
    .task-card {
      background-color: var(--bg-white);
      margin: 10px 15px;
      border-radius: 12px;
      padding: 15px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      border-left: 4px solid transparent;
    }
    
    .task-card.daily {
      border-left-color: var(--primary);
    }
    
    .task-card.weekly {
      border-left-color: var(--success);
    }
    
    .task-card.monthly {
      border-left-color: var(--warning);
    }
    
    .task-card.premium {
      border-left-color: var(--premium);
    }
    
    .task-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    
    .task-title {
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
    
    .task-badge {
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 10px;
      margin-left: 8px;
      font-weight: normal;
    }
    
    .badge-daily {
      background-color: var(--primary-light);
      color: var(--primary);
    }
    
    .badge-weekly {
      background-color: var(--success-light);
      color: var(--success);
    }
    
    .badge-monthly {
      background-color: var(--warning-light);
      color: #E6A23C;
    }
    
    .badge-premium {
      background-color: rgba(255, 184, 0, 0.15);
      color: var(--premium);
    }
    
    .task-reward {
      color: var(--primary);
      font-weight: 600;
      display: flex;
      align-items: center;
    }
    
    .reward-icon {
      color: var(--premium);
      margin-right: 5px;
    }
    
    .task-desc {
      color: var(--text-secondary);
      font-size: 14px;
      margin-bottom: 15px;
      line-height: 1.4;
    }
    
    .task-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .task-progress {
      font-size: 13px;
      color: var(--text-secondary);
    }
    
    .task-btn {
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      border: none;
      cursor: pointer;
    }
    
    .btn-start {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-complete {
      background-color: var(--success-light);
      color: var(--success);
    }
    
    .btn-claimed {
      background-color: var(--bg-light);
      color: var(--text-secondary);
    }
    
    /* 空状态 */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50px 20px;
      text-align: center;
    }
    
    .empty-icon {
      font-size: 60px;
      color: var(--border-light);
      margin-bottom: 20px;
    }
    
    .empty-text {
      color: var(--text-secondary);
      font-size: 16px;
      margin-bottom: 10px;
    }
    
    .empty-subtext {
      color: var(--text-secondary);
      font-size: 14px;
      max-width: 250px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--bg-white);
      border-top: 1px solid var(--border-light);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 10px;
      flex: 1;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="page-header">
    <a href="#" class="back-btn">
      <i class="fa fa-arrow-left"></i>
    </a>
    <div class="header-title">会员任务中心</div>
    <button class="header-btn">
      <i class="fa fa-gift"></i>
    </button>
  </div>
  
  <!-- 任务进度概览 -->
  <div class="task-overview">
    <div class="overview-title">
      <span>本周任务进度</span>
      <span style="color: var(--primary); font-size: 14px;">查看详情</span>
    </div>
    
    <div class="progress-stats">
      <div class="stat-item">
        <div class="stat-value">8</div>
        <div class="stat-label">已完成</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">12</div>
        <div class="stat-label">进行中</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">320</div>
        <div class="stat-label">累计积分</div>
      </div>
    </div>
    
    <div class="progress-container">
      <div class="progress-bar-container">
        <div class="progress-bar" style="width: 40%;"></div>
      </div>
      <div class="progress-text">
        <span>已完成40%</span>
        <span>距离下一级差120分</span>
      </div>
    </div>
  </div>
  
  <!-- 任务分类导航 -->
  <div class="task-tabs">
    <div class="task-tab active">全部任务</div>
    <div class="task-tab">日常任务</div>
    <div class="task-tab">每周任务</div>
    <div class="task-tab">月度任务</div>
    <div class="task-tab">会员专属</div>
  </div>
  
  <!-- 任务列表 -->
  <div class="task-list-container">
    <!-- 日常任务 -->
    <div class="task-card daily">
      <div class="task-header">
        <div class="task-title">
          每日签到
          <span class="task-badge badge-daily">日常</span>
        </div>
        <div class="task-reward">
          <i class="fa fa-diamond reward-icon"></i>
          5积分
        </div>
      </div>
      <div class="task-desc">
        每日登录并完成签到，连续签到7天可获得额外奖励
      </div>
      <div class="task-footer">
        <div class="task-progress">已连续签到12天</div>
        <button class="task-btn btn-complete">已完成</button>
      </div>
    </div>
    
    <div class="task-card daily">
      <div class="task-header">
        <div class="task-title">
          发布一条动态
          <span class="task-badge badge-daily">日常</span>
        </div>
        <div class="task-reward">
          <i class="fa fa-diamond reward-icon"></i>
          10积分
        </div>
      </div>
      <div class="task-desc">
        发布一条符合社区规范的动态内容，内容需包含文字描述
      </div>
      <div class="task-footer">
        <div class="task-progress">0/1 条</div>
        <button class="task-btn btn-start">去完成</button>
      </div>
    </div>
    
    <!-- 每周任务 -->
    <div class="task-card weekly">
      <div class="task-header">
        <div class="task-title">
          关注5位好友
          <span class="task-badge badge-weekly">每周</span>
        </div>
        <div class="task-reward">
          <i class="fa fa-diamond reward-icon"></i>
          30积分
        </div>
      </div>
      <div class="task-desc">
        在本周内关注5位新好友，对方确认后才算完成任务
      </div>
      <div class="task-footer">
        <div class="task-progress">3/5 位</div>
        <button class="task-btn btn-start">去完成</button>
      </div>
    </div>
    
    <div class="task-card weekly">
      <div class="task-header">
        <div class="task-title">
          获得20个点赞
          <span class="task-badge badge-weekly">每周</span>
        </div>
        <div class="task-reward">
          <i class="fa fa-diamond reward-icon"></i>
          40积分 + 1张体验券
        </div>
      </div>
      <div class="task-desc">
        发布的内容在本周内累计获得20个及以上的点赞
      </div>
      <div class="task-footer">
        <div class="task-progress">15/20 个</div>
        <button class="task-btn btn-start">去完成</button>
      </div>
    </div>
    
    <!-- 月度任务 -->
    <div class="task-card monthly">
      <div class="task-header">
        <div class="task-title">
          发布10条优质内容
          <span class="task-badge badge-monthly">月度</span>
        </div>
        <div class="task-reward">
          <i class="fa fa-diamond reward-icon"></i>
          150积分 + 会员体验7天
        </div>
      </div>
      <div class="task-desc">
        每月发布10条优质原创内容，每条内容需获得5个以上互动
      </div>
      <div class="task-footer">
        <div class="task-progress">6/10 条</div>
        <button class="task-btn btn-start">去完成</button>
      </div>
    </div>
    
    <!-- 会员专属任务 -->
    <div class="task-card premium">
      <div class="task-header">
        <div class="task-title">
          会员专属签到
          <span class="task-badge badge-premium">会员</span>
        </div>
        <div class="task-reward">
          <i class="fa fa-diamond reward-icon"></i>
          15积分 + 专属勋章
        </div>
      </div>
      <div class="task-desc">
        高级会员每日额外签到，可获得普通用户3倍积分奖励
      </div>
      <div class="task-footer">
        <div class="task-progress">本月已签22天</div>
        <button class="task-btn btn-claimed">已领取</button>
      </div>
    </div>
    
    <div class="task-card premium">
      <div class="task-header">
        <div class="task-title">
          邀请好友开通会员
          <span class="task-badge badge-premium">会员</span>
        </div>
        <div class="task-reward">
          <i class="fa fa-diamond reward-icon"></i>
          500积分 + 30天会员
        </div>
      </div>
      <div class="task-desc">
        成功邀请1位好友开通高级会员，双方均可获得奖励
      </div>
      <div class="task-footer">
        <div class="task-progress">0/1 位</div>
        <button class="task-btn btn-start">去邀请</button>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-trophy nav-icon"></i>
      <span>任务</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 任务标签切换
    document.querySelectorAll('.task-tab').forEach(tab => {
      tab.addEventListener('click', function() {
        document.querySelectorAll('.task-tab').forEach(t => {
          t.classList.remove('active');
        });
        this.classList.add('active');
        
        // 这里可以添加切换不同任务分类的逻辑
        const tabName = this.textContent;
        console.log('切换到:', tabName);
      });
    });
    
    // 任务按钮点击事件
    document.querySelectorAll('.task-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const taskTitle = this.closest('.task-card').querySelector('.task-title').textContent.trim();
        
        if (this.classList.contains('btn-start')) {
          alert(`开始任务: ${taskTitle}`);
          // 模拟任务完成
          if (confirm(`是否已完成"${taskTitle}"?`)) {
            this.classList.remove('btn-start');
            this.classList.add('btn-complete');
            this.textContent = '已完成';
          }
        } else if (this.classList.contains('btn-complete')) {
          alert(`领取奖励: ${taskTitle}`);
          this.classList.remove('btn-complete');
          this.classList.add('btn-claimed');
          this.textContent = '已领取';
        } else if (this.classList.contains('btn-claimed')) {
          alert(`任务"${taskTitle}"已完成并领取奖励`);
        }
      });
    });
    
    // 返回按钮
    document.querySelector('.back-btn').addEventListener('click', function() {
      history.back();
    });
    
    // 礼品按钮
    document.querySelector('.header-btn').addEventListener('click', function() {
      alert('打开积分兑换中心');
    });
  </script>
</body>
</html>
